<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12" class="flex-row-left">
				<el-input  class="w-200 mr-10" placeholder="输入名称搜索" clearable />
				<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
			</el-col>			
			<el-col :span="12" class="flex-row-right">
				<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Plus /></el-icon>新建</el-button>
				<el-button><el-icon class="mr-5"><Delete /></el-icon>批量删除</el-button>
				<el-button><el-icon class="mr-5"><Download /></el-icon>导入</el-button>
				<el-button><el-icon class="mr-5"><Upload /></el-icon>导出</el-button>
			</el-col>
		 </el-row>
		 <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
		 	<el-table-column type="selection" width="55" />	
		 	<el-table-column prop="id" label="ID"  width="55"/>
		 	<el-table-column prop="id" label="序号"  />
		 	<el-table-column prop="id" label="单据编号" width="120" />
		 	<el-table-column prop="id" label="单据日期" width="120"/>
			<el-table-column prop="id" label="客户编码" width="120"/>
			<el-table-column prop="id" label="客户名称" width="120"/>
			<el-table-column prop="id" label="年度" width="120"/>
			<el-table-column prop="id" label="月份" width="120"/>
			<el-table-column prop="id" label="模板编号" width="120"/>
			<el-table-column prop="id" label="模板名称" width="120"/>
			<el-table-column prop="id" label="创建人" width="120"/>
			<el-table-column prop="id" label="创建日期" width="120"/>
			<el-table-column prop="id" label="备注" width="120"/>
		 	<el-table-column fixed="right" label="操作" width="240">
		 	  <template #default>
				<el-button type="warning" plain><el-icon class="mr-5"><EditPen /></el-icon>编辑</el-button>
				<el-button><el-icon class="mr-5"><Delete /></el-icon>删除</el-button>
		 	  </template>
		 	</el-table-column>
		 </el-table>
		 <div class="flex-row-right mt-20">
			 <el-pagination
			   :page-sizes="[100, 200, 300, 400]"
			   layout="total, sizes, prev, pager, next, jumper"
			   :total="400"
			 />
		 </div>
		 <el-row :gutter="20">
		 	<el-col :span="12" class="flex-row-left">
		 		<el-input  class="w-200 mr-10" placeholder="员工姓名" clearable />
		 		<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
		 	</el-col>
		  </el-row>
		 <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
		 	<el-table-column type="selection" width="55" />	
		 	<el-table-column prop="id" label="ID"  width="55"/>
		 	<el-table-column prop="name" label="序号"  />
		 	<el-table-column prop="date" label="工号" width="120" />
		 	<el-table-column prop="id" label="姓名" width="120"/>
		 			<el-table-column prop="id" label="证照类型" width="120"/>
		 			<el-table-column prop="id" label="证照号码" width="120"/>
		 			<el-table-column prop="id" label="本期收入" width="120"/>
		 			<el-table-column prop="id" label="本期免税收入" width="120"/>
		 			<el-table-column prop="id" label="基本养老保险费" width="120"/>
		 			<el-table-column prop="id" label="基本医疗保险费" width="120"/>
		 			<el-table-column prop="id" label="失业保险费" width="120"/>
		 			<el-table-column prop="id" label="住房公积金" width="120"/>
		 			<el-table-column prop="id" label="累计子女教育" width="120"/>
					<el-table-column prop="id" label="累计继续教育" width="120"/>
					<el-table-column prop="id" label="累计住房贷款利息" width="120"/>
					<el-table-column prop="id" label="累计住房租金" width="120"/>
					<el-table-column prop="id" label="累计赡养老人" width="120"/>
					<el-table-column prop="id" label="企业(职业)年金" width="120"/>
					<el-table-column prop="id" label="商业健康保险费" width="120"/>
					<el-table-column prop="id" label="税延养老保险" width="120"/>
					<el-table-column prop="id" label="其他" width="120"/>
					<el-table-column prop="id" label="准予扣除的捐赠额" width="120"/>
					<el-table-column prop="id" label="减免税额" width="120"/>
					<el-table-column prop="id" label="免税所得" width="120"/>
					<el-table-column prop="id" label="代扣养老保险" width="120"/>
					<el-table-column prop="id" label="代扣医疗保险" width="120"/>
					<el-table-column prop="id" label="代扣失业保险" width="120"/>
					<el-table-column prop="id" label="代扣大病医疗" width="120"/>
					<el-table-column prop="id" label="代扣社保合计" width="120"/>
					<el-table-column prop="id" label="代扣公积金" width="120"/>
					<el-table-column prop="id" label="其它费用" width="120"/>
					<el-table-column prop="id" label="应补（退）税额" width="120"/>
					<el-table-column prop="id" label="实发工资" width="120"/>
					<el-table-column prop="id" label="备注" width="120"/>
		 	<el-table-column fixed="right" label="操作" width="240">
		 	  <template #default>
		 				<el-button type="warning" plain><el-icon class="mr-5"><EditPen /></el-icon>编辑</el-button>
		 				<el-button><el-icon class="mr-5"><Delete /></el-icon>删除</el-button>
		 	  </template>
		 	</el-table-column>
		 </el-table>
		 <div class="flex-row-right mt-20">
		 			 <el-pagination
		 			   :page-sizes="[100, 200, 300, 400]"
		 			   layout="total, sizes, prev, pager, next, jumper"
		 			   :total="400"
		 			 />
		 </div>
		 <cateForm 
		 :dialogVisible="dialogVisible" 
		 :width="40" 
		 @dialogVisibleByValue="dialogVisibleByValue"  
		 ref="cateForm"
		 />
	</div>
</template>

<script>
	import cateForm from '@/components/basic/employees/cate/form.vue'
	export default{
		components:{
			cateForm,
		},
		data(){
			return {	
				dialogVisible:false,
				value5:false,
				loading:true,
				tableData:[],
			}
		},		
		created() {
			this.getList();
		},
		methods:{
			add(){
				this.dialogVisible =  true;
				this.$nextTick(() => {
					
				});
			},
			dialogVisibleByValue (dialogVisible) {
				this.dialogVisible = dialogVisible
			},
			getList(){
				let that = this;
				setTimeout(() => {
				    that.tableData = [
				      {
				    	id:1,
				      },
				      {
				    	id:2,
				      },
				      {
				    	id:3,
				      },
				      {
				    	id:3,
				      },
				      {
				    	id:5,
				      },
				    ];
				    that.loading = false;
				}, 2000)
			}
		},
	}
</script>
<style>
	.example-showcase .el-loading-mask {
	  z-index: 9;
	}
</style>
